<template>
  <div class="warning-trend" ref="container"></div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { map } from "lodash";
import useEcharts from "../../utils/useCharts";

const props = defineProps({
  dataList: Array,
});

const { container, echarts, setOption } = useEcharts();

const updateChart = () => {
  const startOutputs = map(props.dataList.value, (item) => {
    return item.startOutput ? Number(item.startOutput) : 0; // 转换为数字，默认值为 0
  });
  const prices = map(props.dataList.value, (item) => (item.price ? Number(item.price) : 0));

  setOption({
    tooltip: {
      trigger: "axis",
      backgroundColor: "#2f2f48",
      borderColor: "#2f2f48",
      textStyle: { color: "#fff" },
    },
    grid: {
      left: "5%",
      right: "5%",
      bottom: "0%",
      top: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLine: { show: true },
      axisTick: { show: true },
      axisLabel: { color: "#9292c1", margin: 20 },
      data: startOutputs, // 动态绑定X轴数据
    },
    yAxis: {
      type: "value",
      axisLabel: { color: "#9292c1" },
    },
    series: [
      {
        name: "电价",
        type: "line",
        itemStyle: { color: "#3264e7" },
        data: prices, // 动态绑定Y轴数据
      },
    ],
  });
};

// 监听 props.dataList 的变化
watch(
    () => props.dataList,
    () => {
      updateChart();
    },
    { deep: true }
);

// 初始化图表
onMounted(() => {
  updateChart();
});
</script>

<style scoped>
.warning-trend {
  //width: 100%;
  height: 100%;
  min-height: 300px;
}
</style>
